<template>
	<div class="mt-count-down">
		<template v-if="show"
			><count-down-panel
				:date="countDownList.date"
				:name="countDownList.name"
			></count-down-panel></template
		><template v-else>
			<count-down-panel
				key="$defaultCountDown"
				name="暂未设置倒计时"
				:show="false"
				date=""
			>
				<center>
					<img
						alt="默认贴图"
						v-no-drag
						style="width: 60%"
						src="https://pic.downk.cc/item/5ef2adba14195aa594aeb27e.png"
					/>
				</center>
			</count-down-panel>
		</template>
	</div>
</template>

<script lang="ts">
import { checkCountDownList } from "@/utils/typechecker";
import { defineComponent, computed } from "@vue/composition-api";
import countDownPanel from "./countdown-panel.vue";

export default defineComponent({
	name: "mt-count-down",
	components: {
		countDownPanel,
	},
	setup(props, ctx) {
		const countDownList = computed(
			() => ctx.root.$store.state.globalConfig.countdown
		);

		const show = computed(() => checkCountDownList(countDownList));

		document.title = ctx.root.$store.state.globalConfig.title;

		return {
			countDownList,
			show,
		};
	},
});
</script>

<style>
.mt-count-down {
	padding-top: 64px;
}

@media screen and (max-width: 768px) {
	.mt-count-down {
		padding-top: 55px;
	}
}
</style>
